<template>
  <div class="app-container">

    <el-table :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
      <el-table-column align="center" prop="date" label="设备型号" >
      </el-table-column>
      <el-table-column align="center" prop="num" label="设备编号" >
      </el-table-column>
      <el-table-column align="center" prop="name" label="设备名称">
      </el-table-column>
       <el-table-column align="center" prop="type" label="类型/属性">
      </el-table-column>
       <el-table-column align="center" prop="time" label="设备租赁时间">
      </el-table-column>
      <el-table-column align="center" prop="state" label="设备状态">
      </el-table-column>
      <el-table-column label="管 理">
        <template slot-scope="scope">
        <el-button type="success" icon="plus"  @click="showCreate()">设备维修</el-button>
        <el-button type="success"   @click="open2">提前归还</el-button>
      </template>
      </el-table-column>
    </el-table>

      <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>





      <el-dialog title="我的设备" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="type" label="设备型号" width="180"></el-table-column>
          <el-table-column property="name" label="设备名称" width="180"></el-table-column>
          <el-table-column property="time" label="开始日期" width="180"></el-table-column>
          <el-table-column property="last_time" label="剩余时间" width="180"></el-table-column>
          <el-table-column property="process" label="设备报修进度" width="180"></el-table-column>
        </el-table>
      </el-dialog>


    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;'>
        <el-form-item label="申 请 人">
          <el-input type="text"  style="width: 250px;">
          </el-input>
        </el-form-item>
         <el-form-item label="设 备 名 称">
          <el-input type="text"  style="width: 250px;">
          </el-input>
        </el-form-item>
         <el-form-item label="故障发生时间">
          <el-input type="text"  style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="故障问题简述">
          <el-input type="textarea"  style="width: 250px;" :autosize="{ minRows: 2, maxRows: 4}">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="success" >提 交</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,




          tableData: [{
            date: 'A001',
            num: 'QSDE5816',
            type: '制药',
            name: '设备A',
            time: '2019.01.08-2019.05.14',
            state:'设备维修中(80%)'
          }, {
            date: 'A002',
            num:'QSDE5816',
            name: '设备A',
            type: '制药',
            time: '2019.01.08-2019.05.14',
            state:'设备维修中(80%)'
          }, {
            date: 'A003',
            num:'QSDE5816',
            name: '设备A',
            type: '制药',
            time: '2019.01.08-2019.05.14',
            state:'设备正常'
          }, {
            date: 'A004',
            num:'QSDE5816',
            name: '设备A  ',
            type: '制药',
            time: '2019.01.08-2019.05.14',
            state:'设备正常'
          }],
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
        adminName: '管理员' ,
        title: '设备维修申请单'
      }
    },
    created() {//钩子函数创建时调用
    },
    methods: {
      open2() {
        this.$confirm('是否要提前归还', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '归还成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      showCreate() {
        this.dialogFormVisible = true;//显示弹窗
      },       
      getIndex($index) {
        //表格序号
        return $index + 1
      }
    }
  }




</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
